<template>
  <div class="home"> 
      <div>
      <router-view ></router-view>
    </div>
      <van-tabbar class="vant" v-model="active" active-color="#000" route>
        <van-tabbar-item v-for="(item,index) in tabbardata" :key="index" :to="{name:item.routername}">
          <span>{{item.title}}</span>
          <template #icon="props">
            <img :src="props.active ? item.active : item.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<script>
export default {
 created(){
  
 },
 data() {
    return {
      active: 0,
      tabbardata:[
        {
          title:'首页',
          routername:'shouye',
          active: require("../assets/首页.png"),
          inactive: require("../assets/首页1.png"),
        },
        {
          title:'手记',
           routername:'shouji',
           active: require("../assets/手记.png"),
          inactive:require("../assets/手记1.png"),
        },
        {
          title:'发现',
           routername:'faxian',
           active: require("../assets/发现.png"),
          inactive: require("../assets/发现1.png"),
        },
         {
          title:'我的',
          routername:'my',
          active: require("../assets/我的.png"),
          inactive: require("../assets/我的1.png"),
        }
      ],
    };
  },
}
</script>

<style lang="less" scoped>
   
</style>